﻿<!-- blog breadcrumb version one strat here -->
<section class="breadcrumb-blog-version-one">
    <div class="single-bredcurms" style="background-image:url('/images/tourism_background.jpg');">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="bredcrums-content">
                        <h2>添加旅游路线</h2>
                        <ul>
                            <li><a href="index.html">旅游路线</a></li>
                            <li class="active"><a href="contact.html">添加旅游路线</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section><!-- blog breadcrumb version one end here -->

<div id="routeAddVue">
    <section class="section-paddings">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <div class="form-group">
                        <label class="my-1 mr-2" for="startPoint_0">请选择旅行起点：</label>
                        <select class="custom-select my-1 mr-sm-2" onchange="showCities(this.value,this.id)"
                                id="startPoint_0" style="width: 140px"
                                required="required">
                            <option selected>请选择...</option>
                        </select>
                        <select class="custom-select my-1 mr-sm-2" v-model:value="route.startPoint" id="startPoint_1"
                                style="width: 140px"
                                required="required">
                            <option selected>请选择...</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="my-1 mr-2" for="endPoint_0">请选择旅行终点：</label>
                        <select class="custom-select my-1 mr-sm-2" onchange="showCities(this.value,this.id)"
                                id="endPoint_0"
                                style="width: 140px">
                            <option selected>请选择...</option>
                        </select>
                        <select class="custom-select my-1 mr-sm-2" id="endPoint_1" v-model:value="route.terminalPoint"
                                style="width: 140px">
                            <option selected>请选择...</option>
                        </select>
                    </div>
                    <div class="form-group" id="via_points">
                        <button type="button" onclick="btnViaPoints()" class="btn btn-outline-secondary">点击增加途径城市
                        </button>
                        <br/>
                    </div>
                    <div class="form-group">
                        <div>
                            <label class="my-1 mr-2" for="startDate">请选择起始日期：</label>
                            <input class="form-control" type="date" v-model="route.startDate" id="startDate"
                                   style="width: 150px">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                        <div>
                            <label class="my-1 mr-2" for="endDate">结束日期：</label>
                            <input class="form-control" type="date" v-model="route.terminalDate" id="endDate"
                                   style="width: 150px">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="my-1 mr-2" for="type">请选择产品类型：</label>
                        <select class="custom-select my-1 mr-sm-2" v-model="route.type"
                                id="type"
                                style="width: 120px">
                            <option selected>请选择...</option>
                            <option value="跟团游">跟团游</option>
                            <option value="私家团">私家团</option>
                            <option value="自由行">自由行</option>
                            <option value="半自助游">半自助游</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="my-1 mr-2" for="price">请输入价格：</label>
                        <input class="form-control" type="number" v-model="route.price" id="price" style="width: 150px"
                               min="0">
                    </div>
                    <div class="form-group">
                        <label class="my-1 mr-2" for="level">请选择星级：</label>
                        <input class="form-control" type="number" v-model="route.level" id="level" style="width: 150px"
                               min="1" max="5">
                    </div>
                    <div class="form-group">
                        <label class="my-1 mr-2" for="max_people">请输入最大游玩人数：</label>
                        <input class="form-control" type="number" v-model="route.max_people" id="max_people"
                               style="width: 150px" min="1">
                    </div>
                    <form>
                        <div class="form-group">
                            <label>路线相关图片</label>
                            <input class="routeImages" name="file" type="file" multiple=true>
                        </div>
                    </form>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <div class="contact-title">
                        <h2>旅游路线详情</h2>
                    </div>
                    <div class="contact-form">
                        <div id="contact">
                            <div id="message"></div>
                            <div class="form-group">
                                <input type="text" placeholder="标题" v-model="route.title" required="required"
                                       name="name">
                            </div>
                            <div class="form-group">
                                    <textarea name="message" rows="6" required="required" placeholder="简介"
                                              id="introduction" v-model="route.introduction"
                                              style="height: 100px"></textarea>
                            </div>
                            <div class="form-group" id="processes">
                                <button type="button" onclick="btnProcesses()" class="btn btn-outline-secondary">
                                    点击增加详细行程
                                </button>
                                <br/>
                            </div>
                            <div class="form-group">
                                <button type="button" class="button primary" onclick="btnSubmit()"><i
                                        class="fa fa-send"></i>点击提交
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<!-- ============================
        JavaScript Files
============================= -->

<!-- jquery latest version -->
<script src="/reception/js/vendor/jquery-3.2.0.min.js"></script>
<script src="/reception/js/vendor/modernizr-2.8.3.min.js"></script>
<!-- bootstrap js -->
<script src="/reception/js/bootstrap.min.js"></script>
<!-- owl.carousel js -->
<script src="/reception/js/owl.carousel.min.js"></script>
<!-- slick js -->
<script src="/reception/js/slick.min.js"></script>
<!-- meanmenu js -->
<script src="/reception/js/jquery.meanmenu.min.js"></script>
<!-- jquery-ui js -->
<script src="/reception/js/jquery-ui.min.js"></script>
<!-- wow js -->
<script src="/reception/js/wow.min.js"></script>
<!-- counter js -->
<script src="/reception/js/jquery.counterup.min.js"></script>
<!-- Countdown js -->
<script src="/reception/js/jquery.countdown.min.js"></script>
<!-- waypoints js -->
<script src="/reception/js/jquery.waypoints.min.js"></script>
<!-- Isotope js -->
<script src="/reception/js/isotope.pkgd.min.js"></script>
<!-- magnific js -->
<script src="/reception/js/jquery.magnific-popup.min.js"></script>
<!-- Image loaded js -->
<script src="/reception/js/imagesloaded.pkgd.min.js"></script>
<!-- chossen js -->
<script src="/reception/js/chosen.jquery.min.js"></script>
<!-- Jquery plugin -->
<script src="/reception/js/plugins.js"></script>
<!-- select2 js plugin -->
<script src="/reception/js/select2.min.js"></script>
<script src="/reception/js/colors.js"></script>
<!-- Jquery plugin -->
<script src="/reception/js/jquery-customselect.js"></script>
<!-- main js -->
<script src="/reception/js/custom.js"></script>
<!-- layer -->
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>
<!-- Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--bootstrap-->
<link rel="stylesheet" type="text/css" href="/vendors/bootstrap/dist/css/bootstrap.css">
<!-- fileinput -->
<link href="/vendors/bootstrap-fileinput/css/fileinput.css" rel="stylesheet"/>
<script src="/vendors/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="/vendors/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script>
<script type="text/javascript">
    var routeAddVue = new Vue({
        el: "#routeAddVue",
        data: {
            route: {
                title: "",
                introduction: "",
                startPoint: "",
                viaPoint: [],
                terminalPoint: "",
                startDate: "",
                terminalDate: "",
                type: "",
                price: "",
                level: "",
                fk_user_id: "",
                max_people: "",
                tourismImage: [],
                processes: [],
            },
            viaPointSize: 0,
            processSize: 0,
        },
        methods: {
            initRouteAdd: function () {
                this.route.fk_user_id = $("#user_id").val()
                $.ajax({
                    type: "GET",
                    url: "/api/cities/0",
                    dataType: "json",
                    success: function (rs) {
                        $.each(rs, function (index, city) {
                            $("#startPoint_0").append("<option value='" + city.id + "'>" + city.name + "</option>")
                            $("#endPoint_0").append("<option value='" + city.id + "'>" + city.name + "</option>")
                        })
                    }
                })
            },
            showCities: function (value, id) {
                $.ajax({
                    type: "GET",
                    url: "/api/cities/" + value,
                    dataType: "json",
                    success: function (rs) {
                        str = ""
                        if (id.startsWith("start")) {
                            $.each(rs, function (index, city) {
                                str += "<option value='" + city.name + "'>" + city.name + "</option>"
                            })
                            $("#startPoint_1").html(str);
                        } else if (id.startsWith("end")) {
                            $.each(rs, function (index, city) {
                                str += "<option value='" + city.name + "'>" + city.name + "</option>"
                            })
                            $("#endPoint_1").html(str);
                        } else {
                            $.each(rs, function (index, city) {
                                str += "<option value='" + city.id + "'>" + city.name + "</option>"
                            })
                            var num = id.charAt(id.length - 1);
                            $("#viaPoint_" + num).html(str);
                        }
                    }
                })
            },
            btnViaPoints: function () {
                str = "<label class=\"my-1 mr-2\" for=\"viaPoints_" + this.viaPointSize + "\">请选择旅行途径地点：</label>\n" +
                    "<select class=\"custom-select my-1 mr-sm-2\" onchange=\"showCities(this.value,this.id)\"\n" +
                    "id=\"viaPoints_" + this.viaPointSize + "\"\n" +
                    "style=\"width: 140px\">\n" +
                    "<option selected>请选择...</option>\n";
                $.ajax({
                    async: false,
                    type: "GET",
                    url: "/api/cities/0",
                    dataType: "json",
                    success: function (rs) {
                        $.each(rs, function (index, city) {
                            str += "<option value='" + city.id + "'>" + city.name + "</option>"
                        })
                    }
                })
                str += "</select>\n" +
                    "<select class=\"custom-select my-1 mr-sm-2\" id=\"viaPoint_" + this.viaPointSize + "\" style=\"width: 140px\">\n" +
                    "<option selected>请选择...</option>\n" +
                    "</select>";
                $("#via_points").append(str);
                this.viaPointSize++;
            },
            btnProcesses: function () {
                str = "<div class=\"form-group\">" +
                    "<input type=\"text\" placeholder=\"第几天？\" required=\"required\" style='width: 100px' id=\"day_" + this.processSize + "\"> &nbsp;" +
                    "<input type=\"text\" placeholder=\"旅行行程\" required=\"required\" style='width: 200px' id=\"process_" + this.processSize + "\">" +
                    "<textarea name=\"message\" placeholder=\"行程详细描述\" style='height: 150px' id=\"detail_" + this.processSize + "\"></textarea>" +
                    "</div>"
                $("#processes").append(str);
                this.processSize++;
            },
            initRouteImages: function () {
                var self = this;
                $(".routeImages").each(function (index, item) {
                    $(item).fileinput({
                        language: "zh",
                        uploadUrl: "/api/upload/routeImages",
                        allowedFileExtensions: ["png", "jpg", "jpeg", "ico", "bmp", "gif"],
                        showUpload: true,
                        showRemove: false,
                        showPreview: true,
                        showCaption: true,
                        browseClass: "btn btn-primary",
                        removeClass: "btn btn-danger",
                        dropZoneEnabled: true,
                        maxFileCount: 5,
                        autoReplace: true,//是否可替换
                        layoutTemplates: {
                            actionUpload: ''
                        },
                        enctype: 'multipart/form-data',
                        msgFilesTooMany: "选择上传的文件数量 超过允许的最大数值！",
                        validateInitialCount: true,
                    }).on('fileerror', function (event, data, msg) {
                        layer.alert("Upload file failed" + msg, {icon: 0});
                    }).on('fileuploaded', function (event, data) {
                        if (data.response.status === 200) {
                            self.route.tourismImage.push({"url": data.response.data})
                        } else {
                            $(".fileinput-remove-button").click();
                        }
                        layer.alert(data.response.message, {icon: 0});
                    }).on('fileclear', function (event) {
                    });
                })
            },
            btnSubmit: function () {
                var self = this;
                //获取viaPoints
                for (var i = 0; i < self.viaPointSize; i++) {
                    self.route.viaPoint[i] = {id: $("#viaPoint_" + i).val()}
                }
                //获取processes
                for (var j = 0; j < self.processSize; j++) {
                    self.route.processes[j] = {
                        day: $("#day_" + j).val(),
                        process: $("#process_" + j).val(),
                        detail: $("#detail_" + j).val(),
                    }
                }
                $.ajax({
                    type: "POST",
                    url: "/api/route",
                    contentType: "application/json",
                    dataType: "json",
                    data: JSON.stringify(self.route),
                    success: function (rs) {
                        layer.alert(rs.message);
                    },
                    error: function (data) {
                        layer.alert(data);
                    }
                })
            },
        },
        created: function () {
            window.showCities = this.showCities;
            window.btnViaPoints = this.btnViaPoints;
            window.btnProcesses = this.btnProcesses;
            window.btnSubmit = this.btnSubmit;
        },
        mounted: function () {
            this.initRouteAdd();
            this.initRouteImages();
        },
    })
</script>
